<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="text-center"> <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="gradient"> <stop offset="0%" /> <stop offset="100%" /> </linearGradient> <rect width="100" height="50" fill="url(#gradient)" /> </svg> <br/> <br/> <button id="greenButton" class="btn btn-success">Green</button> <button id="redButton" class="btn btn-danger">Red</button> </div> </div> </div> </div> <script> const svg = document.querySelector('svg'); document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green')); document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red')); </script>

svg.green stop:nth-child(1) { stop-color: #60c50b; } svg.green stop:nth-child(2) { stop-color: #139a26; } svg.red stop:nth-child(1) { stop-color: #c84f31; } svg.red stop:nth-child(2) { stop-color: #dA3448; }